<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title></title>
  <!--hammer CSS-->
  <link rel="stylesheet" href="../stylesheets/hammer-define.css">
  <!--use hammer-->
  <script src="../javascripts/hammer.js"></script>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: 'HelveticaNeue', '黑体-简';
      background-color: rgb(229, 241, 248);
      color: #666;
    }

    ul {
      padding-left: 0;
      margin: 0;
      background-color: #fff;
      margin-bottom: 8px;
      border-bottom: 1px solid #d8d8d8;
    }

    li ul {
      border: 0;
    }

    ul:last-of-type {
      margin-bottom: 0;
    }

    .line {
      height: 1px;
      width: 100%;
      background-color: #d8d8d8;
      display: block;
    }

    .short-line {
      position: relative;
      left: 20px;
    }

    .inverter {
      list-style: none;
    }

    .list-title {
      display: flex;
      align-items: center;
      width: 100%;
      height: 52px;
      color: #666;
      padding: 10px;
      border-top: 1px solid #d8d8d8;
    }

    .list-title .title-img {
      width: 30px;
      height: 30px;
      margin-left: 10px;
    }

    .title-span {
      margin-left: 5px;
      display: block;
      width: 100%;
      float: right;
    }

    #projectBasicInfo .list-title .title-span {
      display: inline-block;
      line-height: 52px;
    }

    #projectBasicInfo .list-content {
      clear: both;
      display: inline-block;
      width: 100%;
      padding: 3px 0;
      font-size: 16px;
    }

    .content-span-left {
      color: #3A86E8;
    }

    .sub-title {
      padding-left: 20px;
      height: 32px;
      line-height: 32px;
      font-size: 16px;
    }

    .sub-title .title-span {
      margin-left: 0;
    }

    #wmjg li ul,
    #install li ul,
    #productPack li ul,
    #wuliaoqingdan li ul {
      margin-top: -18px;
    }

    #installPosition .list-content {
      width: 30%;
      float: left;
      margin-left: 2.5%;
      list-style: none;
    }

    #installPosition .list-content img {
      display: inline-block;
      width: 100%;
      height: 100%;
    }

    .clearfix {
      clear: both;
    }

    #install .list-content .organize .list-content .content-span {
      display: block;
      padding: 3px 20px;
    }


    #projectBasicInfo .list-content,
    #wmjg .list-content ul .list-content,
    #productPack .list-content .productPackage .list-content,
    #productPack .list-content .leadRail .list-content,
    #productPack .list-content .zuChuanCanShu .list-content,
    #wuliaoqingdan .list-content .solarPowerComp .list-content,
    #wuliaoqingdan .list-content .inverter .list-content,
    #wuliaoqingdan .list-content .cradle .list-content,
    #wuliaoqingdan .list-content .ACBox .list-content,
    #wuliaoqingdan .list-content .others .list-content {
      display: block;
      width: 100%;
      height: 24px;
      padding: 3px 0;
    }

    #projectBasicInfo .list-content .content-span-left,
    #wmjg .list-content ul .list-content .content-span-left,
    #productPack .list-content .productPackage .list-content .content-span-left,
    #productPack .list-content .leadRail .list-content .content-span-left,
    #productPack .list-content .zuChuanCanShu .list-content .content-span-left,
    #wuliaoqingdan .list-content .solarPowerComp .list-content .content-span-left,
    #wuliaoqingdan .list-content .inverter .list-content .content-span-left,
    #wuliaoqingdan .list-content .cradle .list-content .content-span-left,
    #wuliaoqingdan .list-content .ACBox .list-content .content-span-left,
    #wuliaoqingdan .list-content .others .list-content .content-span-left {
      float: left;
      margin-left: 20px;
    }

    #projectBasicInfo .list-content .content-span-right,
    #wmjg .list-content ul .list-content .content-span-right,
    #productPack .list-content .productPackage .list-content .content-span-right,
    #productPack .list-content .leadRail .list-content .content-span-right,
    #productPack .list-content .zuChuanCanShu .list-content .content-span-right,
    #wuliaoqingdan .list-content .solarPowerComp .list-content .content-span-right,
    #wuliaoqingdan .list-content .inverter .list-content .content-span-right,
    #wuliaoqingdan .list-content .cradle .list-content .content-span-right,
    #wuliaoqingdan .list-content .ACBox .list-content .content-span-right,
    #wuliaoqingdan .list-content .others .list-content .content-span-right {
      float: right;
      margin-right: 20px;
    }

  </style>
</head>
<body>
<!-- 项目基本信息 -->
<ul id="projectBasicInfo">
  <li class="list-title">
    <img class="title-img" src="images/icon-info.png" alt="">
    <span class="title-span">项目基本信息</span>
    <span class="icon icon-arrow-down"></span>
  </li>
  <div class="line"></div>
  <li class="list-content">
    <span class="content-span-high content-span-left">客户名称</span>
    <span id="customerName" class="content-span content-span-right"></span>
  </li>
  <li class="list-content">
    <span class="content-span-high content-span-left">客户联系人</span>
    <span id="customerContactMan" class="content-span content-span-right"></span>
  </li>
  <li class="list-content">
    <span class="content-span-high content-span-left">所属地区</span>
    <span id="belongedDistrict" class="content-span content-span-right"></span>
  </li>
  <li class="list-content">
    <span class="content-span-high content-span-left">详细地址</span>
    <span id="addressSpec" class="content-span content-span-right"></span>
  </li>
</ul>

<!-- 屋面结构 -->
<ul id="wmjg">
  <li class="list-title">
    <img class="title-img" src="img/icon-building.png" alt="">
    <span class="title-span">屋面结构</span>
    <span class="icon icon-arrow-down"></span>
  </li>
</ul>

<!-- 安装布线 -->
<ul id="install">
  <li class="list-title">
    <img class="title-img" src="images/icon-bunch.png" alt="">
    <span class="title-span">安装布线</span>
  </li>
  <li class="list-content">
    <ul class="organize">
      <li class="list-title sub-title">
        <span class="title-span">组件布线</span>
      </li>
      <div class="line short-line"></div>
      <li class="list-content">
        <span id="zjbx" class="content-span"></span>
      </li>
    </ul>
  </li>
  <li class="list-content">
    <ul id="installPosition" class="NBQAZWZCT_FA">
      <li class="list-title sub-title">
        <span class="title-span">逆变器 安装位置</span>
      </li>
      <div class="line short-line"></div>
    </ul>
  </li>
  <li class="list-content clearfix">
    <ul class="fangLeiJieDi">
      <li class="list-title sub-title">
        <span class="title-span">防雷接地</span>
      </li>
    </ul>
  </li>
</ul>

<!-- 产品包 -->
<ul id="productPack">
  <li class="list-title">
    <img class="title-img" src="images/icon-card.png" alt="">
    <span class="title-span">产品包</span>
  </li>
  <li class="list-content">
    <ul class="productPackage">
      <li class="list-title sub-title">
        <span class="title-span">产品包</span>
      </li>
      <div class="line short-line"></div>
      <li class="list-content">
        <span id="product_model" class="content-span content-span-left"></span>
        <span id="modules_num" class="content-span content-span-right"></span>
      </li>
    </ul>
  </li>
  <li class="list-content">
    <ul id="leadRails" class="leadRail">
      <li class="list-title sub-title">
        <span class="title-span">导轨</span>
      </li>
      <div class="line short-line"></div>
      <li class="list-content">
        <span class="content-span content-span-left">导轨1A数量</span>
        <span id="dg_1a" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">导轨2A数量</span>
        <span id="dg_2a" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">导轨3A数量</span>
        <span id="dg_3a" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">导轨1B数量</span>
        <span id="dg_1b" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">导轨2B数量</span>
        <span id="dg_2b" class="content-span content-span-right"></span>
      </li>
    </ul>
  </li>
  <li class="list-content">
    <ul class="zuChuanCanShu">
      <li class="list-title sub-title">
        <span class="title-span">组串参数</span>
      </li>
      <div class="line short-line"></div>
      <li class="list-content">
        <span class="content-span content-span-left">组串数量</span>
        <span id="zc_num" class="content-span content-span-right">4</span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">组串1组件数量</span>
        <span id="zc1_cpts_num" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">组串2组件数量</span>
        <span id="zc2_cpts_num" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">组串3组件数量</span>
        <span id="zc3_cpts_num" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">组串4组件数量</span>
        <span id="zc4_cpts_num" class="content-span content-span-right"></span>
      </li>
    </ul>
  </li>
</ul>

<!-- 物料清单 -->
<ul id="wuliaoqingdan">
  <li class="list-title">
    <img class="title-img" src="images/icon-tile.png" alt="">
    <span class="title-span">物料清单</span>
    <span class="icon icon-arrow-down"></span>
  </li>
  <li class="list-content">
    <ul class="solarPowerComp">
      <li class="list-title sub-title">
        <span class="title-span">太阳能组件</span>
      </li>
      <div class="line short-line"></div>
      <li class="list-content">
        <span class="content-span content-span-left">其他</span>
        <span class="content-span content-span-right">9块</span>
      </li>
    </ul>
  </li>
  <li id="inverter" class="list-content">
    <ul class="inverter">
      <li class="list-title sub-title">
        <span class="title-span">逆变器</span>
      </li>
      <div class="line short-line"></div>
      <li class="list-content">
        <span id="inverter1" class="content-span content-span-left"></span>
        <span class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span id="inverter2" class="content-span content-span-left"></span>
        <span class="content-span content-span-right"></span>
      </li>
    </ul>
  </li>
  <li class="list-content">
    <ul class="cradle">
      <li class="list-title sub-title">
        <span class="title-span">支架</span>
      </li>
      <div class="line short-line"></div>
      <li class="list-content">
        <span class="content-span content-span-left">支架1A数量</span>
        <span id="zj_1a" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">支架2A数量</span>
        <span id="zj_2a" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">支架3A数量</span>
        <span id="zj_3a" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">支架1B数量</span>
        <span id="zj_1b" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">支架2B数量</span>
        <span id="zj_2b" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">夹具</span>
        <span id="jiaju_qty" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">挂钩</span>
        <span id="guagou_qty" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">中压块</span>
        <span id="zyk" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">边压块</span>
        <span id="byk" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">导电片</span>
        <span id="ddp" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">接地件</span>
        <span id="jdj" class="content-span content-span-right"></span>
      </li>
    </ul>
  </li>
  <li class="list-content">
    <ul class="ACBox">
      <li class="list-title sub-title">
        <span class="title-span">交流配电箱</span>
      </li>
      <div class="line short-line"></div>
      <li class="list-content">
        <span id="pdx" class="content-span content-span-left"></span>
        <span class="content-span content-span-right"></span>
      </li>
    </ul>
  </li>
  <li class="list-content">
    <ul class="others">
      <li class="list-title sub-title">
        <span class="title-span">其他</span>
      </li>
      <div class="line short-line"></div>
      <li class="list-content">
        <span class="content-span content-span-left">直流电缆</span>
        <span id="zldl" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">交流电缆</span>
        <span id="jldl" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">电线护管及接头</span>
        <span id="hgjt" class="content-span content-span-right"></span>
      </li>
      <li class="list-content">
        <span class="content-span content-span-left">辅材</span>
      </li>
    </ul>
  </li>
</ul>

<!--<div id="hammer-mask"></div>-->
<!--<div id="hammer-bg" onclick="hideHammer(event)">-->
  <!--<div id="hammer-box">-->
    <!--<img id="image-big" src="images/htjd01.png" alt="">-->
  <!--</div>-->
  <!--<div id="hammer-page">1/1</div>-->
  <!--<div id="hammer-page-ctrl">-->
    <!--<span onclick="lastImg()" style="float: left"> < last </span>-->
    <!--<span onclick="nextImg()" style="float: right"> next > </span>-->
  <!--</div>-->
<!--</div>-->


<script src="../javascripts/hammer-define.js"></script>
<script>
  var imagesArr = [];
  (function() {
    // 项目基本信息 - dom 查询
    var customerName = document.getElementById('customerName'),
      customerContactMan = document.getElementById('customerContactMan'),
      belongedDistrict = document.getElementById('belongedDistrict'),
      addressSpec = document.getElementById('addressSpec'),

    // 屋面结构 - dom 查询
      wmjg = document.getElementById('wmjg'),

    // 安装布线 - 组件布线 - dom 查询
      zjbx = document.getElementById('zjbx'),

    // 产品包 - 产品包物料编码 - dom 查询
      product_model = document.getElementById('product_model'),
      modules_num = document.getElementById('modules_num'),

    // 产品包 - 导轨 - dom 查询
      dg_1a = document.getElementById('zc_num'),
      dg_2a = document.getElementById('dg_2a'),
      dg_3a = document.getElementById('dg_3a'),
      dg_1b = document.getElementById('dg_1b'),
      dg_2b = document.getElementById('dg_2b'),

    // 产品包 - 组串参数 - dom 查询
      zc_num = document.getElementById('zc_num'),
      zc1_cpts_num = document.getElementById('zc1_cpts_num'),
      zc2_cpts_num = document.getElementById('zc2_cpts_num'),
      zc3_cpts_num = document.getElementById('zc3_cpts_num'),
      zc4_cpts_num = document.getElementById('zc4_cpts_num'),

    // 物料清单 - 逆变器 - dom 查询
      inverter1 = document.getElementById('inverter1'),
      inverter2 = document.getElementById('inverter2'),

    // 物料清单 - 支架 - dom 查询
      dg_1a = document.getElementById('dg_1a'),
      dg_2a = document.getElementById('dg_2a'),
      dg_3a = document.getElementById('dg_3a'),
      dg_1b = document.getElementById('dg_1b'),
      dg_2b = document.getElementById('dg_2b'),
      jiaju_qty = document.getElementById('jiaju_qty'),
      guagou_qty = document.getElementById('guagou_qty'),
      zyk = document.getElementById('zyk'),
      byk = document.getElementById('byk'),
      ddp = document.getElementById('ddp'),
      jdj = document.getElementById('jdj'),

    // 物料清单 - 交流配电箱 - dom 查询
      pdx = document.getElementById('pdx'),

    // 物料清单 - 其他 - dom 查询
      zldl = document.getElementById('zldl'),
      jldl = document.getElementById('jldl'),
      hgjt = document.getElementById('hgjt');

    // 获取 json 数据
    var path = 'http://pm.ht-home.cn/v1/api/others/getDesignInfoForShare.json?projectId=5617',
      xhr = new XMLHttpRequest();
    xhr.open('GET', path, true);
    xhr.send(null);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          var jsonData = JSON.parse(xhr.responseText);

          function insertImg(classStr) {
            var element = document.getElementsByClassName(classStr);
            // 图片 - 数据
            jsonData.data.classList.forEach(function(list, index) {
              if (typeof(list[classStr]) !== 'undefined') {
                list[classStr].forEach(function(image, index) {
                  var newNode = document.createElement('li');
                  newNode.className = 'list-content';
                  var str = '';
                  str += '<img onclick="useHammer(event, ' + index + ')" class="' + classStr + 'image" class="image" src="';
                  str += image.smallImageUrl;
                  str += '" alt="">';
                  imagesArr.push(image.largeImageUrl);
                  newNode.innerHTML = str;
                  element[0].appendChild(newNode);
                });
              }
            });

            // 图片 - 大小
            var images = document.querySelectorAll('.' + classStr + 'image');
            var vw = document.body.clientWidth;
            var imageWidth = vw * 0.3;
            marginTop = (vw - imageWidth * 3) / 4;
            images.forEach(function(image) {
              image.parentNode.style.height = imageWidth + 'px';
              image.parentNode.style.marginTop = marginTop + 'px';
            });
            images[images.length - 1].parentNode.style.marginBottom = marginTop + 'px';
          }

//                    insertImg('NBQAZWZCT_FA');



          // 项目基本信息 - 数据插入
          customerName.innerHTML = jsonData.data.customerName;
          customerContactMan.innerHTML = jsonData.data.customerContactMan;
          belongedDistrict.innerHTML = jsonData.data.belongedDistrict;
          addressSpec.innerHTML = jsonData.data.addressSpec;

          // 屋面结构 - 数据插入
          jsonData.data.spmsSurveyWmList.forEach(function(sswl) {
            var newNode = document.createElement('li');
            newNode.className = 'list-content';
            var str = '';
            str += '<ul><li class="list-title sub-title"><span class="title-span">屋面';
            str += sswl.surveyWmId === 'undefined' ? '' : sswl.surveyWmId;
            str += '</span></li><div class="line short-line"></div><li class="list-content"><span class="content-span content-span-left">屋面倾角</span><span class="content-span content-span-right">';
            str += typeof(sswl.wmqj) === 'undefined' ? '' : sswl.wmqj;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">屋顶朝向</span><span class="content-span content-span-right">';
            str += typeof(sswl.wdcx) === 'undefined' ? '' : sswl.wdcx;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">屋面尺寸长</span><span class="content-span content-span-right">';
            str += typeof(sswl.wmLong) === 'undefined' ? '' : sswl.wmLong;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">屋面尺寸宽</span><span class="content-span content-span-right">';
            str += typeof(sswl.wmWeith) === 'undefined' ? '' : sswl.wmWeith;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">女儿墙高度</span><span class="content-span content-span-right">';
            str += typeof(sswl.nrqHeigth) === 'undefined' ? '' : sswl.nrqHeigth;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">屋面凸起物遮挡情况</span><span class="content-span content-span-right">';
            str += typeof(sswl.wmtq) === 'undefined' ? '' : sswl.wmtq;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">屋面厚度</span><span class="content-span content-span-right">';
            str += typeof(sswl.wmhd) === 'undefined' ? '' : sswl.wmhd;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">防水方案</span><span class="content-span content-span-right">';
            str += typeof(sswl.fsfa) === 'undefined' ? '' : sswl.fsfa;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">屋面形状</span><span class="content-span content-span-right">';
            str += typeof(sswl.wmxz) === 'undefined' ? '' : sswl.wmxz;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">本屋面屋顶类型</span><span class="content-span content-span-right">';
            str += typeof(sswl.bwwdlx) === 'undefined' ? '' : sswl.bwwdlx;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">可用尺寸(长)</span><span class="content-span content-span-right">';
            str += typeof(sswl.ableLong) === 'undefined' ? '' : sswl.ableLong;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">可用尺寸(宽)</span><span class="content-span content-span-right">';
            str += typeof(sswl.ableWeith) === 'undefined' ? '' : sswl.ableWeith;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">安装方向</span><span class="content-span content-span-right">';
            str += typeof(sswl.azfx) === 'undefined' ? '' : sswl.azfx;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">排布图</span><span class="content-span content-span-right">';
            str += typeof(sswl.arrPhoto) === 'undefined' ? '' : sswl.arrPhoto;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">组件数量</span><span class="content-span content-span-right">';
            str += typeof(sswl.zjsl) === 'undefined' ? '' : sswl.zjsl;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">安装倾角</span><span class="content-span content-span-right">';
            str += typeof(sswl.azqj) === 'undefined' ? '' : sswl.azqj;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">组件间距</span><span class="content-span content-span-right">';
            str += typeof(sswl.zjjl) === 'undefined' ? '' : sswl.zjjl;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">女儿墙距离</span><span class="content-span content-span-right">';
            str += typeof(sswl.neqjl) === 'undefined' ? '' : sswl.neqjl;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">安装数量</span><span class="content-span content-span-right">';
            str += typeof(sswl.azsl) === 'undefined' ? '' : sswl.azsl;
            str += '</span></li>';
            str += '<li class="list-content"><span class="content-span content-span-left">东西方向女儿墙距离</span><span class="content-span content-span-right">';
            str += typeof(sswl.ewneqjl) === 'undefined' ? '' : sswl.ewneqjl;
            str += '</span></li>';
            str += '</ul>';
            newNode.innerHTML = str;
            wmjg.appendChild(newNode);
          });

          // 安装布线 - 组件布线 - 数据插入
          var zjbxStr = '以';
          zjbxStr += jsonData.data.layoutOption1;
          zjbxStr += '方式进行布线,从';
          zjbxStr += jsonData.data.layoutOption2;
          zjbxStr += jsonData.data.layoutOption3;
          zjbxStr += '通到';
          zjbxStr += jsonData.data.layoutOption4;
          zjbxStr += ',并网在用户配电箱';
          zjbx.innerHTML = zjbxStr;

          // 产品包 - 产品包物料编码 - 数据插入
          product_model.innerHTML = jsonData.data.product_model;
          modules_num.innerHTML = jsonData.data.modules_num;

          // 产品包 - 导轨 - 数据插入
          dg_1a.innerHTML = jsonData.data.dg1a;
          dg_2a.innerHTML = jsonData.data.dg2a;
          dg_3a.innerHTML = jsonData.data.dg3a;
          dg_1b.innerHTML = jsonData.data.dg1b;
          dg_2b.innerHTML = jsonData.data.dg2b;

          // 产品包 - 组串参数 - 数据插入
          zc_num.innerHTML = jsonData.data.zc_num;
          zc1_cpts_num.innerHTML = jsonData.data.zc1CptsNum;
          zc2_cpts_num.innerHTML = jsonData.data.zc2CptsNum;
          zc3_cpts_num.innerHTML = jsonData.data.zc3CptsNum;
          zc4_cpts_num.innerHTML = jsonData.data.zc4CptsNum;

          // 物料清单 - 逆变器 - 数据插入
          inverter1.innerHTML = jsonData.data.inverter1;
          inverter2.innerHTML = jsonData.data.inverter2;

          // 物料清单 - 支架 - 数据插入
          dg_1a.innerHTML = jsonData.data.dg1a;
          dg_2a.innerHTML = jsonData.data.dg2a;
          dg_3a.innerHTML = jsonData.data.dg3a;
          dg_1b.innerHTML = jsonData.data.dg1b;
          dg_2b.innerHTML = jsonData.data.dg2b;
          jiaju_qty.innerHTML = jsonData.data.jiajuQty;
          guagou_qty.innerHTML = jsonData.data.guagouQty;
          zyk.innerHTML = jsonData.data.zyk;
          byk.innerHTML = jsonData.data.byk;
          ddp.innerHTML = jsonData.data.ddp;
          jdj.innerHTML = jsonData.data.jdj;

          // 物料清单 - 交流配电箱 - 数据插入
          pdx.innerHTML = jsonData.data.pdx;

          // 物料清单 - 其他 - 数据插入
          zldl.innerHTML = jsonData.data.zldl;
          jldl.innerHTML = jsonData.data.jldl;
          hgjt.innerHTML = jsonData.data.hgjt;
        }
      }
    };

  })();

  function useHammer(e, index) {
    var mask = document.getElementById('hammer-mask'),
      bg = document.getElementById('hammer-bg'),
      box = document.getElementById('hammer-box'),
      page = document.getElementById('hammer-page'),
      img = document.getElementById('image-big'),

      scrollTop = document.getElementsByTagName('body')[0].scrollTop;

    mask.style.top = scrollTop;
    bg.style.top = scrollTop;
    window.initHammer(mask, bg, box, page, img);
    window.showHammer(imagesArr, index);
  }

</script>
</body>
